<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>备用金管理</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<%@include file="/webpage/include/treeview.jsp" %>
	<%@include file="imprestList.js" %>
	<style>
		.table {
			border: solid 1px #ddd;
			display: inline-block;
		}

		th {
			border-right: solid #ddd 1px;
			border-bottom: solid #ddd 1px;
			background-color: #ddd;
		}


	</style>
	<script type="text/javascript">

		/*设置同步横向滚动*/
        $(document).ready(function () {
            $("#table").Scrollable({
                ScrollHeight: 400,
                width: 1000
            });
        })
        (function ($) {
            $.fn.Scrollable = function (options) {//1、定义一个jQuery实例方法，也是我们调用这个插件的入口
                var defaults = {
                    ScrollHeight: 300,
                    Width: 0
                };
                var options = $.extend(defaults, options); //2、扩展集合，如果外部没有传入ScrollHeight的值，就默认使用300这个值，如果传入，就用传入的ScrollHeight值
                return this.each(function () {
                    var grid = $(this).get(0);//3、获取当前gridview控件的对象
                    var gridWidth = grid.offsetWidth;//4、获取gridview的宽度
                    var headerCellWidths = new Array();
                    for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
                    }//5、创建了一个存储表头各个标题列的宽度的数组
                    grid.parentNode.appendChild(document.createElement("div"));//6、在文档中gridview的同级位置最后加一个div元素
                    var parentDiv = grid.parentNode;//7、gridview的父节点，是个div

                    var table = document.createElement("table");//8、在dom中创建一个table元素
                    for (i = 0; i < grid.attributes.length; i++) {
                        if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                            table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                        }
                    }//9、把gridview的所有属性加到新创建的table元素上
                    table.style.cssText = grid.style.cssText;//10、将样式也加到table元素上
                    table.style.width = gridWidth + "px";//11、为table元素设置与gridview同样的宽
                    table.appendChild(document.createElement("tbody"));//12、为table元素加一个tbody元素
                    table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13、把gridview中的第一行数据加到tbody元素中，即table里现在存着一行gridview的标题元素，同时在gridview里删除了标题这一行的元素
                    var cells = table.getElementsByTagName("TH");//14、取得表格标题列的集合

                    var gridRow = grid.getElementsByTagName("TR")[0];//15、gridview中第一行数据列的集合
                    for (var i = 0; i < cells.length; i++) {
                        var width;
                        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16、如果标题格的宽度大于数据列的宽度
                            width = headerCellWidths[i];
                        }
                        else {//17、如果标题格的宽度小于数据列的宽度
                            width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                        }
                        cells[i].style.width = parseInt(width - 3) + "px";
                        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";//18、将每个标题列和数据列的宽度均调整为取其中更宽的一个，-3是出于对表格的样式进行微调考虑，不是必须
                    }
                    parentDiv.removeChild(grid);//19、删除gridview控件（注意只是从文档流中删除，实际还在内存当中，注意27条），现在的情况是table里只有一个表头

                    var dummyHeader = document.createElement("div");//20、在文档中再创建一个div元素
                    dummyHeader.appendChild(table);//21、把表头table加入其中
                    parentDiv.appendChild(dummyHeader);//22、把这个div插入到原来gridview的位置里
                    if (options.Width > 0) {//23、如果我们最初传入了一个想要的表格宽度值，就将gridWidth赋上这个值
                        gridWidth = options.Width;
                    }
                    var scrollableDiv = document.createElement("div");//24、再创建一个div
                    gridWidth = parseInt(gridWidth) + 17;//25、在原基础上+17是因为这是一个具有滑动条的table，当出现滑动条的时候，会在宽度上多出一个条的宽度，为了使数据列与标题列保持一致，要把这个宽度算进行，17这个值也不是必须，这个可以试验着来。
                    scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";//26、给具有滚动条的div加上样式，height就是我们想让它在多大的长度时出现滚动条
                    scrollableDiv.appendChild(grid);//27、将gridview（目前只存在数据存在数据列）加到这个带有滚动条的div中，这里是从内存中将grid取出
                    parentDiv.appendChild(scrollableDiv);//28、将带有滚动条的div加到table的下面
                });
            };
        })
	</script>
</head>
<body>

	<div class="panel-heading">
		<h3 class="panel-title">备用金列表</h3>
	</div>
	<div class="panel-body">
		<sys:message content="${message}"/>

	<!-- 搜索1 -->


		<div class="accordion-inner">
			<form:form id="searchForm" modelAttribute="imprest" class="form form-horizontal well clearfix">
				<div class="col-xs-12 col-sm-6 col-md-4">
					<div class="form-group">
						<label class="label-item single-overflow pull-left" title="起始时间">起始时间:</label>
						<div class="col-xs-12">
							<div class='input-group date' id='minDate' >
								<input type='text'  id="min" class="form-control"  />
								<span class="input-group-addon">
			                       <span class="glyphicon glyphicon-calendar"></span>
			                   </span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-4">
					<div class="form-group">
						<label class="label-item single-overflow pull-left" title="截止时间">截止时间:</label>
						<div class="col-xs-12">
							<div class='input-group date' id='maxx' >
								<input type='text'  id="max" class="form-control"  />
								<span class="input-group-addon">
			                       <span class="glyphicon glyphicon-calendar"></span>
			                   </span>
							</div>
						</div>
					</div>
				</div><shiro:hasPermission name="ap:imprest:pro">

				<div class="col-xs-12 col-sm-6 col-md-4">
					<label class="label-item single-overflow pull-left" title="：">项目：</label>
					<select id="pro" class=" form-control">
						<option value="">请选择</option>
						<option value="武汉润滑油仓储项目">武汉润滑油仓储项目</option>
						<option value="北京润滑油运输项目">北京润滑油运输项目</option>
						<option value="天津润滑油运输项目">天津润滑油运输项目</option>
						<option value="西安润滑油仓储配送项目">西安润滑油仓储配送项目</option>
						<option value="郑州润滑油运输项目">郑州润滑油运输项目</option>
						<option value="重庆润滑油仓储配送项目">重庆润滑油仓储配送项目	</option>

						<option value="石家庄润滑油仓储配送项目">石家庄润滑油仓储配送项目</option>
					</select>
				</div></shiro:hasPermission>
				<%--<div class="col-xs-12 col-sm-6 col-md-4">--%>
					<%--<label class="label-item single-overflow pull-left" title="：">项目：</label>--%>
					<%--<select name="projectName" class=" form-control">--%>
						<%--<option value="">请选择</option>--%>
						<%--<option value="386ae05512bb43cca2e8c62c90ebf594">武汉润滑油仓储项目</option>--%>
						<%--<option value="f6d6fc830ce548fb90777364c1c7e2f2">北京润滑油运输项目</option>--%>
						<%--<option value="5b3d351e89ec4f43b8de7b184bb52a1a">天津润滑油运输项目</option>--%>
						<%--<option value="a5d6a0eaa9424e9a91b01b73bb152d0a">西安润滑油仓储配送项目</option>--%>
						<%--<option value="a5d6a0eaa9424e9a91b01b73bb152d0a">郑州润滑油运输项目</option>--%>
						<%--<option value="875085671e2c4221a32969e7b7ad2334">石家庄润滑油仓储配送项目</option>--%>
					<%--</select>--%>
				<%--</div>--%>
				<div class="col-xs-6 col-sm-3 col-md-2">
			<div style="margin-top:26px">
			  <a  id="search" onclick="cx()" class="btn btn-primary btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
			  <a  id="reset" onclick="dc()" class="btn btn-primary btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 导出</a>
			 </div>
	    </div>
	</form:form>
	</div>


	<!-- 工具栏 -->

<table class="table text-nowrap">
	<tr>
		<td>现金总额</td>
		<td id="xj"></td>
		<td >油卡总额</td>
		<td id="yk"></td>
	</tr>
</table>
		<input type="hidden" id="ids"/>
	<!-- 表格 -->
<div style="position: relative;">
			<div style=" overflow: scroll; height:500px;" id="table-head">
	<table class="table text-nowrap" id="table" >
		<div style="position:fixed; background:#FFF;  margin-left:0px; margin-top:0px;margin-right: 0px;">
		<thead >
		<tr>
			<th style="width: 200px;">申请日期</th>
			<th style="width: 200px;">项目名称</th>
			<th style="width: 200px;">申请人</th>
			<th style="width: 200px;">单据号</th>
			<th style="width: 200px;">申请理由</th>
			<th style="width: 200px;">申请类别</th>
			<th style="width: 200px;">申请金额</th>
			<th style="width: 200px;">到账日期</th>
			<th style="width: 200px;">到账金额</th>
			<th style="width: 200px;">付款人</th>
		</tr>
		</thead>
		</div>


		<tbody id="detil"></tbody>
	</table>

    <!-- context menu -->


			</div>

	</div></div>
</body>
</html>